<script setup lang="ts">
import {ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox} from 'element-plus'
import {useI18n} from '@/hooks/web/useI18n'
import {useCache} from '@/hooks/web/useCache'
import {resetRouter} from '@/router'
import {useRouter} from 'vue-router'
import {loginOutApi} from '@/api/login'
import {useDesign} from '@/hooks/web/useDesign'
import {useTagsViewStore} from '@/store/modules/tagsView'
import {useAppStore} from '@/store/modules/app'
import {ElNotification} from 'element-plus'
import {expireData, getFaultyEquipment} from '@/api/eq'

const appStore = useAppStore()

const tagsViewStore = useTagsViewStore()

const {getPrefixCls} = useDesign()

const prefixCls = getPrefixCls('user-info')

const {t} = useI18n()

const {wsCache} = useCache()

const {replace} = useRouter()

expireData().then((res: any) => {
  let data = res.data;
  if (data.length <= 0) {
    return;
  }
  // 即将过期数量
  let arr1 = data.filter(eq => eq.counts > 0).length;
  // 已过期数量
  let arr2 = data.filter(eq => eq.counts == 0).length;

  let msg = "";
  if (arr1 > 0 && arr2 > 0) {
    msg = "尊敬的用户，您好！<br/>系统检测到您有<b style='color: #F56C6C;'>" + arr1 + "</b>台设备<b>已过期</b>，并有<b style='color: #E6A23C;'>" + arr2 + "</b>台设备<b>即将过期</b>，请尽快处理！";
  } else {
    if (arr1 > 0) {
      msg = "尊敬的用户，您好！<br/>系统检测到您有<b style='color: #E6A23C;'>" + arr1 + "</b>台设备<b>即将过期</b>，请尽快处理！";
    }
    if (arr2 > 0) {
      msg = "尊敬的用户，您好！<br/>系统检测到您有<b style='color: #F56C6C;'>" + arr2 + "</b>台设备<b>已过期</b>，请尽快处理！";
    }
  }

  ElNotification({
    type: 'warning',
    title: '设备过期提醒',
    dangerouslyUseHTMLString: true,
    message: msg,
    position: 'bottom-right',
    duration: 100000,
  });

})

getFaultyEquipment().then((res: any) => {
  let data = res.data;
  if (data.length <= 0) {
    return;
  }

  let msg = "您以下设备发生故障：<br/>";
  for (let i = 0; i < data.length; i++) {
    msg += "<b>" + data[i].equipmentNo + "</b><br/>";
  }
  msg += "请尽快联系检修，以免影响使用！";

  ElNotification({
    type: 'error',
    title: '设备故障警告',
    dangerouslyUseHTMLString: true,
    message: msg,
    position: 'bottom-right',
    duration: 200000,
  });

})

const loginOut = () => {
  ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  })
    .then(async () => {
      const res = await loginOutApi().catch(() => {
      })
      if (res) {
        wsCache.clear()
        tagsViewStore.delAllViews()
        resetRouter() // 重置静态路由表
        replace('/login')
      }
    })
    .catch(() => {
    })
}

</script>

<template>
  <ElDropdown :class="prefixCls" trigger="click">
    <div class="flex items-center" style="color: #fff;">
      <img
        src="@/assets/imgs/avatar.jpg"
        alt=""
        class="w-[calc(var(--tags-view-height))] rounded-[50%]"
      />
      <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)] mr-4">{{
        wsCache.get(appStore.getUserInfo).fullName
      }}</span>
    </div>
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem divided>
          <div @click="loginOut">{{ t('common.loginOut') }}</div>
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>
